<template>
    <el-form label-width="150px" ref="projectForm" :model="form" :rules="rules">
        <el-form-item label="项目名称" prop="name">
            <el-input v-model="form.name" placeholder="填入名称"/>
        </el-form-item>

        <el-form-item label="项目运营时间" prop="time">
            <el-date-picker
                    v-model="form.time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <div>项目到期后不会再生成每天日志数据！</div>
        </el-form-item>

        <!--<el-form-item label="直播分类" prop="categories">
            <project_search_category v-model="form.categories"
                                     :default-values="defaultCategories"
                                     :multiple="true"
                                     @remove="removeCategory"/>
        </el-form-item>-->

        <el-form-item prop="aggregation">
            <div slot="label">直播分类数据聚合<br>将多个分类合并成一个分类来展示</div>
            <categories_aggregation ref="aggregation"
                                    v-model="form.options.aggregation"
                                    :types="form.platformTypes"/>
        </el-form-item>

        <el-form-item label="隐藏直播记录的字段">
            <el-checkbox v-model="form.options.hide.cost">成本</el-checkbox>
            <el-checkbox v-model="form.options.hide.click">点击</el-checkbox>
            <el-checkbox v-model="form.options.hide.added">新增</el-checkbox>
            <el-checkbox v-model="form.options.hide.reflux">回流</el-checkbox>
            <el-checkbox v-model="form.options.hide.danmu">弹幕</el-checkbox>
        </el-form-item>

        <el-form-item label="邮件内容表格的颜色" prop="color">
            <el-color-picker v-model="form.options.color"/>
            <div class="inline-block" style="padding: 0 5px;" :style="{background:form.options.color,color:'#fff',}">
                效果预览
            </div>
        </el-form-item>

        <el-form-item label="每天日志发送到邮箱" prop="email">
            <el-input type="textarea" v-model="form.email" placeholder="填入邮箱，一行一个，不需要填入项目负责人和执行人的邮箱"/>
        </el-form-item>

        <el-form-item>
            <el-alert v-show="message.show" :type="message.type" :title="message.content"/>
        </el-form-item>

        <el-form-item>
            <el-button @click="_submit" type="primary" :loading="loading">提交</el-button>
            <el-button @click="$router.push({name:'project',params:$route.params})" v-if="form.id">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import _ from 'lodash';
    import Project_search_category from "./project_search_category";
    import Categories_aggregation from "./categories_aggregation";

    export default {
        components: {
            Categories_aggregation,
            Project_search_category
        },
        name: "project_info_form",
        props: {
            project: {type: Object, default: null,},
            message: {
                required: true,
                default() {
                    return {show: false, content: '', type: 'error'};
                },
            },
            loading: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            value: Object,
        },
        data() {
            return {
                form: {
                    name: '',
                    time: [],
                    types: [],
                    email: '',
                    options: {
                        color: '#00B2FF',
                        hide: {cost: true, click: true, added: true, reflux: true, danmu: true},
                        aggregation: [],
                    }
                },
                rules: {
                    name: [
                        {required: true, message: '必须填入名称', trigger: 'blur'}
                    ],
                    time: [{
                        required: true, validator: (rule, value, callback) => {
                            if (value.length === 0)
                                return callback(new Error('必须填写运营时间'));
                            callback();
                        }, trigger: 'blur'
                    }],
                    aggregation: [{
                        required: true,
                        validator: (rule, value, callback) => {
                            if (this.form.options.aggregation.length === 0)
                                return callback(new Error('必须添加直播分类'));
                            this.form.options.aggregation.forEach(a => {
                                if (_.isEmpty(a.name))
                                    return callback(new Error('聚合分类的名称不能留空'));
                                if (_.isEmpty(a.data))
                                    return callback(new Error('聚合分类的分类内容不能留空'));
                            });
                            callback();
                        }, trigger: 'blur',
                    }],
                },
            };
        },
        methods: {
            _submit() {
                this.$refs['projectForm'].validate(valid => {
                    if (!valid) return;
                    this.$emit('input', this.form);
                    this.$emit('submit');
                });
            },
        },
        watch: {
            project(val) {
                console.log('watch project val', val);
                this.form.id = val.id;
                this.form.name = val.name;
                this.form.time = [val.start_at, val.end_at];
                this.form.email = val.email;
                this.form.platformTypes = val.platformTypes;
                this.form.options = val.options;
                if (!this.form.options.color)
                    this.form.options.color = '#66b1ff';
                if (!this.form.options.hide)
                    this.form.options.hide = {cost: true, click: true, added: true, reflux: true, danmu: true};
            }
        },
    }
</script>

<style scoped>

</style>